<template>
  <view class="quest">
    <!--  -->
    <view class="wrap">
      <!--  -->
      <view class="head">
        <view class="head-left">

          <view>任务说明 ({{ quest.nowCount }}/{{ quest.allCount }})</view>
        </view>
        <!-- <view class="mark">60分</view> -->
      </view>
      <!--  -->
      <view class="problem">
        <text class="t">行为题：</text>
        <view class="p">任务名称:{{ quest.title }}</view>
        <view class="p">任务说明:{{ quest.taskText }}</view>
        <view class="sl-img">
          <image :src="quest.titleImg" class="img"></image>
          <image class="icon" src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/fd-icon.png"
                 @click="showImage(quest.titleImg)"></image>
        </view>
        <view class="text">示例图片</view>

      </view>
      <!--  -->
      <view class="problem">
        <!--  @click="uploadImg" -->
        <view class="box">
          <image v-if="quest.userImg" :src="quest.userImg" style="width: 100%; height: 100%;"></image>
          <image v-else class="icon"
                 src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/add-icon.png"></image>
        </view>
        <view class="text">拍摄图片</view>
      </view>

    </view>


  </view>
</template>

<script>
import {uploadImage} from '@/api/upload.js'

export default {
  data() {
    return {
      img: null
    }
  },
  props: {
    quest: {
      type: Object,
      default: {}
    },
    completeCount: {
      typeof: Number,
      default: 0
    },
    sum: {
      typeof: Number,
      default: 0
    }
  },
  computed: {
    newCompleteCount() {
      return this.completeCount + 1 > this.sum ? this.sum : this.completeCount + 1
    }
  },
  onLoad() {

  },
  methods: {
    clear() {
      this.img = null
    },
    // 查看图片
    showImage(url) {
      uni.previewImage({
        current: url,
        urls: [url]
      })
    },
    uploadImg() {
      uploadImage().then(res => {
        this.img = res
        this.$emit('uploadImg', this.img)
      })
      // uni.chooseImage({
      // 	count: 1,
      // 	success: (res) => {
      // 		this.img = res.tempFilePaths[0]
      // 		thi.$emit('uploadImg', this.img)
      // 	}
      // })
    },
    onSubmit() {
      uni.showModal({
        content: '提交成功',
        cancelText: "重新选择",
        confirmText: "继续提交",
        success: (res) => {
          if (res.confirm) {
            this.toUrl('/pages/challenge/quest3')
          }
        }
      })
    },
    toUrl(url) {
      if (!url) return
      uni.navigateTo({
        url
      })
    },
  }
}
</script>

<style>
page {
  min-height: 100%;
  background-color: rgba(235, 236, 237, 1);
}
</style>
<style lang="scss" scoped>
.quest {
  .head-bg {
    width: 100%;
    height: 350rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .wrap {
    width: 100%;
    padding: 40rpx;
    box-sizing: border-box;
  }

  .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20rpx;
  }

  .head-left {
    display: flex;
    align-items: center;
    font-size: 36rpx;
    line-height: 50rpx;
    color: rgba(0, 0, 0, 1);

    .icon {
      width: 45rpx;
      height: 45rpx;
      margin-right: 10rpx;
    }
  }

  .mark {
    width: 130rpx;
    height: 55rpx;
    border-radius: 20rpx;
    border: 1px solid rgba(201, 148, 2, 1);
    font-size: 30rpx;
    line-height: 55rpx;
    color: rgba(201, 148, 2, 1);
    text-align: center;
  }

  .problem {
    width: 100%;
    padding: 30rpx;
    box-sizing: border-box;
    border-radius: 20rpx;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 12px -3px rgba(0, 0, 0, 0.24);
    margin-bottom: 30rpx;

    .box {
      width: 100%;
      height: 345rpx;
      background: rgba(248, 248, 250, 1);
      border: 2px solid rgba(229, 229, 229, 1);
      display: flex;
      align-items: center;
      justify-content: center;

      .icon {
        width: 94rpx;
        height: 94rpx;
      }
    }

    .t {
      font-size: 36rpx;
      font-weight: 700;
      line-height: 52.13rpx;
      color: rgba(56, 56, 56, 1);
    }

    .p {
      font-size: 32rpx;
      line-height: 46.34rpx;
      color: rgba(56, 56, 56, 1);
      margin-bottom: 20rpx;
    }

    .sl-img {
      width: 100%;
      height: 380rpx;
      border-radius: 20rpx;
      margin-bottom: 15rpx;
      position: relative;

      .img {
        width: 100%;
        height: 100%;
        border-radius: 20rpx;
      }

      .icon {
        position: absolute;
        z-index: 1;
        top: 15rpx;
        right: 15rpx;
        width: 36rpx;
        height: 36rpx;
      }
    }

    .text {
      font-size: 32rpx;
      font-weight: 500;
      line-height: 46.34rpx;
      color: rgba(56, 56, 56, 1);
      text-align: center;
    }
  }

  .btns {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40rpx;

    .btn {
      width: 300rpx;
      height: 92rpx;
    }
  }

  .xyg-btn {
    width: 100%;
    height: 92rpx;
  }
}
</style>
